<template>
  <div class="fill-order-warpper">
    <div v-if="!adressDetail" class="empty">
      <router-link :to="{path:'/addressManage',query:{userId:$route.query.userId}}">
        + 添加收货地址
      </router-link>
      
    </div>
    <div v-else class="address-box">
      <!-- <img src="../assets/images/11.png" alt="" class="left"> -->
       <router-link :to="{path:'/addressManage',query:{userId:$route.query.userId}}">
        <div class="middle">
          <div class="section-line">收货人：{{adressDetail.personName}}
            <span class="phone">{{adressDetail.phone}}</span>
          </div>
          <div class="address-line">收货地址：<span>{{adressDetail.areaCode}}{{adressDetail.address}}</span></div>
        </div>
        <div class="right">
          <img src="../assets/images/17.png" alt="" srcset="">
        </div>
       </router-link>
    </div>
    <div class="fengeBar"></div>
    <group>
      <cell-box class="product-box">
        <img :src="shopText.logo" alt="" class="left">
        <div class="middle flex">
            <div>
                <div class="name-box">{{shopText.name}}</div>
                <div class="section-line">{{shopSize}}</div>
                <div class="price-box">￥{{shopText.discountPrice}} <span>￥{{shopText.price}}</span></div>
            </div>

          <span>x{{num}}</span>
        </div>
        <div class="right"></div>
      </cell-box>
      <cell title="商品合计"  :value="shopText.discountPrice*num"></cell>
      <cell title="运费" :value="shopText.postage"></cell>
      <popup v-model="show1">
        <!-- group already has a top border, so we need to hide header's bottom border-->
        <popup-header
        left-text="取消"
        right-text="确认"
        title="请选择你的优惠卷"
        :show-bottom-border="false"
        @on-click-left="show1 = false"
        @on-click-right="gokey"></popup-header>
         <group gutter="0">
          <radio :options="getMyKeyon" @on-change="change"></radio>
        </group>
      </popup>
      <cell title="优惠券" :value="keyontext" is-link @click.native="getsure"></cell>
    </group>

    <div class="fill-bom flex">
        <div>合计：￥{{totalPrice}}</div>
        <a href="javascript:;" @click="submit">提交订单</a>
    </div>
  </div>
</template>

<script>
import axios from '@/api/request'
  import {
    Tab,
    Group,
    Cell,
    CellBox,
    PopupHeader,
    Popup,
    Radio

  } from "vux";

  export default {
    components: {
      CellBox,
      Cell,
      Group,
     PopupHeader, 
     Popup,
     Radio
    },
    data () {
      return {
        shopSize:{},
        keyontext:0,
        keyonnum:0,
        show1:false,
        adressDetail:{},
        shopText:{},
        getMyKeyon:[],
        num:1,
        totalPrice:0,
      }
    },
  created(){
      this.getorder()
      this.getedress()

    },
     methods:{
       getsure(){
         if(this.getMyKeyon.length>0){
             this.show1=true
         }else{
            this.$vux.toast.text('无可用优惠卷')
            self.keyontext='无可用优惠卷'
         }
        
       },
       change(value, label){
         var self=this
          self.keyontext=label
          self.keyonnum=value
         
       },
       gokey(){
         var self=this
         self.show1 = false
         self.totalPrice=self.shopText.discountPrice*self.num-self.keyonnum
       },
       getcouponUser(){   //获取可用的优惠卷
           var self=this
           var data={
             price : self.totalPrice, 
             userId : this.$route.query.userId, 
             shopId : this.shopText.shopId
           }
          axios('/device/couponUser/getMyKeyon','post',data).then(res=>{
               if(res.data.code==1000){
                      console.log(res)
                       for(let i=0;i<res.data.data.length;i++){
                           var inf={
                             value:res.data.data[i].name,
                             key:res.data.data[i].numberValue
                           }
                         self.getMyKeyon=self.getMyKeyon.concat(inf)
                         console.log(res)
                       }
                  
                 }
             })
       },
       getorder(){
         var self=this
          axios('/device/indent/getByOrder/'+this.$route.query.orderId,'post',{}).then(res=>{
            if(res.data.code==1000){
              self.shopText=res.data.data[0].product
              self.shopSize=res.data.data[0].productLabels
              self.num=res.data.data[0].indentInfo.count
              self.totalPrice=self.shopText.discountPrice*self.num
              self.getcouponUser()
            }
          })
       },
       getedress(){   //获取地址
             var self=this    ///device/userAddress/findUserAddress/{userId}
             axios('/device/userAddress/findUserAddress/'+this.$route.query.userId,'post',{}).then(res=>{
               if(res.data.code==1000){
                   self.adressDetail=res.data.data
                }else{
                     self.adressDetail=""
                }
             })
       },
       jsApiCall()
            {
              let _this=this
              WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',
                    this.jsApiParameters,
                    function(res){
                        WeixinJSBridge.log(res.err_msg);
                       
                        if(res.err_msg == "get_brand_wcpay_request:ok"){
                       // alert(res.err_code+res.err_desc+res.err_msg);
                        _this.$router.push({path:'/paySuccess'})
                       // window.location.href="http://www.chenyekeji.com/21market//#/paySuccess?userId"+_this.$route.query.userId;
                    }else{
                        //返回跳转到订单详情页面
                        alert(支付失败);
                            
                    }
                    }
                );
            },
            callpay()
            {
                if (typeof WeixinJSBridge == "undefined"){
                    if( document.addEventListener ){
                        document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
                    }else if (document.attachEvent){
                        document.attachEvent('WeixinJSBridgeReady', this.jsApiCall); 
                        document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
                    }
                }else{
                   this.jsApiCall();
                }
            },
       submit(){   //提交订单 
              var self=this   
            //   var bb= new Array()
            //   bb.push(self.getMyKeyon.id)
             var data={
               totalPrice:self.totalPrice,
               userId:this.$route.query.userId,
               userAddressId:self.adressDetail.id,
               orderNo:this.$route.query.orderId,
               couponInfoId:self.getMyKeyon.id
             }
             console.log(data)
             axios('/device/payOne/','post',data).then(res=>{
                console.log(res)
                 this.jsApiParameters=res.data.finalpackage
                 self.callpay()
             })
       }
     }
  };
</script>

<style>
   /* body{
        position: absolute;
        left: 0;
        top: 0;
        background: #f3f5f9;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }*/
    .vux-label{
        font-size: 14px;
        color: #444;
    }
</style>
<style lang="less" scoped>
  .fill-order-warpper{
    height: 100%;
    background: #f2f3f6;
  }
  .product-box {
    display: flex;
    height: 180rem/75;
    .left {
      flex-grow: 0;
      width: 148rem/75;
      height: 148rem/75;
      border-radius: 5px;
      position: absolute;
    }
    .middle {
      flex-grow: 1;
      margin-left: 96rem/37.5;
      justify-content: space-between;
      .name-box {
        color: #333;
        font-size: 14rem/37.5;
        line-height: 23px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
      }
      .section-line {
        margin-top: 0;
        font-size: 12rem/37.5;
        color: #a4a4a4;
        margin-top: 8rem/75;

    
      }
      .price-box {
        color: #333;
        font-size: 12rem/37.5;
        margin-top: 8rem/75;
        span{
            color:#999;
            text-decoration: line-through;
            margin-left: 10rem/75;
        }
      }
    }
    .right {
      flex-grow: 0;
    }
  }
  .empty{
    height: 96rem/75;
    line-height: 96rem/75;
    background: #fff;
    text-align: center;
    color: #333;
    font-size: 14rem/37.5;
  }
  .address-box {
    position: relative;
    height: 210rem/75;
    position: relative;
    padding:25rem/75 0 0;
    // padding-bottom: 50rem/75;
    background: #fff;
    overflow: hidden;
    a{
      display: block;
    }
    .left {
      position: absolute;
      width: 16rem/37.5;
      height: 18rem/37.5;
      top: 26rem/37.5;
      left: 13rem/37.5;
    }
    .middle {
      // margin-left: 43rem/37.5;
      // margin-right: 33rem/37.5;
      padding-left: 15rem/75;
      padding-right: 20rem/75;
      .section-line {
        font-size: 15rem/37.5;
        color: #333;
      }
      .address-line{
        font-size: 15rem/37.5;
        margin-top: 7rem/37.5;
        padding-right: 20rem/75;
        color: #333;
        line-height: 46rem/75;
        span{
          // font-size: 12rem/37.5;
        }
      }
      .phone{
        font-size: 14rem/37.5;
        margin-top: 0;
        margin-left: 252rem/75;
      }
    }
    .right {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 22rem/37.5;
      display: flex;
      align-items: center;
      img {
        width: 8rem/37.5;
        height: 14rem/37.5;
      }

    }
  }
  .fengeBar{
    height:25rem/75;
    background:#f2f3f6;
    width:100%;
  }
  .fill-bom{
    position:fixed;
    bottom: 0;
    left:0;
    height:95rem/75;
    align-items:center;
    box-shadow:-2px 0 10px 2px rgba(0,0,0,.6);
    width:100%;
    justify-content: space-between;
    div{
        width:465rem/75;
        text-align: center;
        font-size:32rem/75;
        color: #ff4444;
    }
    a{
        flex: 1;
        text-align: center;
        background: #ffda44;
        height:100%;
        line-height: 95rem/75;
        font-size:32rem/75;
        color: #444444;
    }
  }
</style>

<style>
  .fill-order-warpper .weui-cells:before {
    content: none;
  }
  .fill-order-warpper .weui-cell:before{
    left: 0;
  }
  .fill-order-warpper .weui-cells:after {
    border-bottom: 1rem/37.5 solid #dbdbdb;
  }

  .fill-order-warpper .weui-cell:before {
    border-top: 1rem/37.5 solid #dbdbdb;
  }
  .fill-order-warpper .weui-cells{
    margin-top: 0;
  }
  .vux-label{
    font-size: 0.32rem;
  }

</style>